<!doctype html>
<!--
@license
Copyright 2018 Google Inc. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<html>
<head>
  <title>dialog demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script  src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
  <script type="module" src="../node_modules/@material/mwc-button/mwc-button.js"></script>
  <script type="module" src="../node_modules/@material/mwc-textfield/mwc-textfield.js"></script>
  <script type="module" src="../node_modules/@material/mwc-dialog/mwc-dialog.js"></script>
  <script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
  <link rel="stylesheet" href="demo-component.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">

  <style>
    body {
      min-height: calc(100vh - 4em);
    }
  </style>
</head>
<body class="unresolved">
  <header>
    <a href="index.html"><mwc-icon>arrow_back</mwc-icon>
    <span>Dialog</span></a>
  </header>

  <main>
    <div>

    <mwc-button data-num="1" raised>Basic</mwc-button>
    <mwc-dialog id="dialog1" heading="Dialog header">
      Dialog body text
      <mwc-button slot="primaryAction" dialogAction="ok">Action 2</mwc-button>
      <mwc-button slot="secondaryAction" dialogAction="cancel">Action 1</mwc-button>
    </mwc-dialog>

    <mwc-button data-num="2" raised>Actions</mwc-button>
    <mwc-dialog id="dialog2" heading="Actions">
      <p>
        By setting the dialogAction="my-action" attribute on any element projected into
        mwc-dialog, you can close the dialog by clicking on that element. The
        dialog will then fire a non-bubbling "closing" event and a non-bubbling
        "closed" event with an event detail of {action: "my-action"}
      </p>
      <mwc-button slot="primaryAction" dialogAction="customAction">This has action</mwc-button>
      <mwc-button slot="secondaryAction">this does not</mwc-button>
    </mwc-dialog>

    <mwc-button data-num="3" raised>Scrollable</mwc-button>
    <mwc-dialog id="dialog3" heading="My Title">
      <p>
        Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll.
      </p>
      <mwc-button slot="primaryAction" dialogAction="close">Close this!</mwc-button>
    </mwc-dialog>

    <mwc-button data-num="4" raised>Hide Actions</mwc-button>
    <mwc-dialog id="dialog4" heading="Hide Actions">
      <p>
        If you don't have actions, you may want to set the "hideActions" property.
        This property will remove extra whitespace at the bottom of this dialog.
        This button will toggle that whitespace:
      </p>
      <mwc-button raised id="toggleActions">Toggle hideActions</mwc-button>
      <div>
        mwc-dialog.hideActions is currently:
        <span id="hideActionVal">
          false
        </span>
      </div>
    </mwc-dialog>

    <style>
      .styled {
        --mdc-theme-surface: #FFF;
        --mdc-dialog-scrim-color: rgba(35, 47, 52, .32);
        --mdc-dialog-heading-ink-color: #232F34;
        --mdc-dialog-content-ink-color: #232F34;
        --mdc-dialog-scroll-divider-color: transparent;
        --mdc-dialog-min-width: 500px;
        --mdc-dialog-max-width: 700px;
        --mdc-dialog-max-height: 350px;
        --mdc-dialog-shape-radius: 0px;

        /* color buttons */
        --mdc-theme-primary: #344955;
      }
    </style>

    <mwc-button data-num="5" raised>Styled</mwc-button>
    <mwc-dialog id="dialog5" heading="Styled" class="styled">
        <div>These are the current styles applied to this dialog</div>
        <pre>
--mdc-theme-surface: #FFF;
--mdc-dialog-scrim-color: rgba(35, 47, 52, .32);
--mdc-dialog-heading-ink-color: #232F34;
--mdc-dialog-content-ink-color: #232F34;
--mdc-dialog-scroll-divider-color: transparent;
--mdc-dialog-min-width: 500px;
--mdc-dialog-max-width: 700px;
--mdc-dialog-max-height: 350px;
--mdc-dialog-shape-radius: 0px;

/* color buttons */
--mdc-theme-primary: #344955;
        </pre>
      <mwc-button slot="primaryAction" dialogAction="close">
        Too stylish for me!
      </mwc-button>
    </mwc-dialog>

    <mwc-button data-num="6" raised>Stacked</mwc-button>
    <mwc-dialog id="dialog6" heading="Stacked" stacked>
      <div>
        This is what happens when you set the stacked property on mwc-dialog.
        Notice that the primary action is now on top.
      </div>
      <mwc-button slot="primaryAction" dialogAction="close">
        Primary
      </mwc-button>
      <mwc-button slot="secondaryAction" dialogAction="close">
        Secondary
      </mwc-button>
    </mwc-dialog>

    <mwc-button data-num="7" raised>Initial Focus</mwc-button>
    <mwc-dialog id="dialog7" heading="Initial Focus">
      <div>
        In this example we set "dialogInitialFocus" on the mwc-textfield.
        When this dialog opens, it is auto-focused.
      </div>
      <mwc-textfield
          label="i am auto-focused"
          dialogInitialFocus>
      </mwc-textfield>
      <mwc-button slot="primaryAction" dialogAction="close">
        Primary
      </mwc-button>
      <mwc-button slot="secondaryAction" dialogAction="close">
        Secondary
      </mwc-button>
    </mwc-dialog>

  <script>
    addEventListener('load', () => document.body.classList.remove('unresolved'));

    const buttons = document.body.querySelectorAll('mwc-button[data-num]');

    for (let i = 0; i < buttons.length; i++) {
      const button = buttons[i];
      const buttonNum = button.dataset.num;

      button.addEventListener('click', () => {
        const dialog = document.body.querySelector('#dialog' + buttonNum);
        dialog.open = true;
      });
    }

    toggleActions.onclick = () => {
      const dialog = document.body.querySelector('#dialog4');
      const hideActionSpan = document.body.querySelector('#hideActionVal');

      const hideAction = !dialog.hideActions;
      dialog.hideActions = hideAction;
      hideActionSpan.innerText = hideAction;
    }
  </script>
</body>
</html>
